<template>
	<view class="wrap" :style="colorStyle">
		<!-- <view class="nav_box" :style="{height:navigatorHeight+'px'}">
			<view class="sys_bar" :style="{height:statusBarHeight+'px'}"></view>
			<view class="nav_info">
				<view class="back_icon">
					<view class="iconfont icon-fanhui2"></view>
				</view>
				<view class="sys_title">{{navTitle}}</view>
				<view class="back_icon"></view>
			</view>
		</view> -->
		<view class="input-box">
			<view class="li">
				<view class="name">持卡人</view>
				<view class="value">
					<input placeholder="请输入持卡人" type="text" v-model="userInfo.card_username" />
				</view>
			</view>
			<view class="li">
				<view class="name">联系电话</view>
				<view class="value">
					<input placeholder="请输入联系电话" type="number" maxlength="11" v-model="userInfo.card_phone" />
				</view>
			</view>
			<view class="li">
				<view class="name">银行名称</view>
				<view class="value">
					<input placeholder="请输入银行名称" type="text" maxlength="11" v-model="userInfo.bank_name" />
					<!-- <text v-if="!userInfo.province">省,市,区</text>
					<text v-else>{{`${userInfo.province},${userInfo.city},${userInfo.area}`}}</text>
					<image :src="imgSrc+'my-19.png'"></image> -->
				</view>

			</view>
			<view class="li">
				<view class="name">卡号</view>
				<view class="value">
					<input placeholder="请填写卡号" type="text" v-model="userInfo.card_number" />
				</view>
			</view>
			<view class="list flex_s" @click="defaultAdd">
				<view class="img_box">
					<image :src="imgSrc+'check2.png'" v-if="userInfo.is_default"></image>
					<image :src="imgSrc+'check1.png'" v-else></image>
				</view>
				设置为默认
			</view>
		</view>
		<view class="btn-d" @click="address_set">
			<view class="btn">确定保存</view>
		</view>
		<!-- 省市区 -->
		<!-- <cityPicker :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel"
			:visible="showAddress" /> -->
	</view>
</template>
<script>
	import colors from "@/mixins/color";
	import {
		debounceImmediate
	} from "@/utils/validate";
	// 导入省市区组件
	// import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	import {
		edit,
		card_detail
	} from "@/api/new_api.js";
	import {
		mapGetters
	} from "vuex";
	export default {
		mixins: [colors],
		components: {
			// cityPicker
		},
		data() {
			return {
				imgSrc:this.$imgSrc,
				code: '',
				alterMain: false,
				statusBarHeight: 0,
				userInfo: {
					is_default: false,
					card_username: '', //持卡人
					card_phone: '', //联系电话
					bank_name: '', //中国银行
					card_number: '', //银行卡号
					id: '',
					type: 0
				},
				showAddress: false,
				defaultValue: ['', '', ''],
				maskCloseAble: true, //点击模态框是否关闭弹框
				p_c_a: '',
				navTitle: "添加银行卡",
				navigatorHeight: '',
				statusBarHeight: '',
				
			};
		},
		onLoad(option) {
			this.getSystemInfo()
			if (option.id) {
				this.userInfo.type = 1
				this.userInfo.id = option.id
				this.card_detail()
				this.navTitle = "编辑银行卡"
				uni.setNavigationBarTitle({
					title:"编辑银行卡"
				})
			}
		},
		methods: {
			getSystemInfo() {

				uni.getSystemInfo({
					success: res => {
						const system = res
						this.statusBarHeight = system.statusBarHeight //状态栏高度
						//获取胶囊信息
						const menu = uni.getMenuButtonBoundingClientRect()
						// this.searchLeft = this.menu.left //搜索按钮的右偏移量
						//导航栏高度= （胶囊顶部距离-状态栏高度） x 2 + 胶囊的高度
						this.navigatorHeight = (menu.top - system.statusBarHeight) * 2 + menu.height + system
							.statusBarHeight


					}
				})
			},
			card_detail(code) {
				const params = {
					id: this.userInfo.id
				}
				card_detail(params).then((res) => {
					const data = res.data
					this.userInfo = data

				})
			},


			defaultAdd() {
				this.userInfo.is_default = !this.userInfo.is_default
			},
			address_set: debounceImmediate(function() {
				if (!this.userInfo.card_username) return this.$util.Tips({
					title: '请输入持卡人'
				})
				if (!this.userInfo.card_phone) return this.$util.Tips({
					title: '请输入持卡人'
				})

				edit(this.userInfo).then((res) => {
					this.$util.Tips({
						title: res.msg,
						success: () => {
							uni.navigateBack()
						}
					})
					console.log(res, "sdkflsdkfl");
				}).catch((err) => {
					uni.$u.toast(err)
				})
			}),
			confirm(val) {
				console.log(val, "sljdkfjskdjfk");
				this.showAddress = false
				this.userInfo.province = val.provinceName
				this.userInfo.city = val.cityName
				this.userInfo.area = val.areaName
				this.p_c_a = this.adressFormat(val.provinceName, val.cityName, val.areaName)

			},
			adressFormat(province, city, district) {
				let addressArr = []
				addressArr.push(province)
				addressArr.push(city)
				addressArr.push(district)
				return addressArr.join(',')
			},
			cancel() {
				this.showAddress = false
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		},
	};
</script>
<style lang="scss" scoped>
	.wrap {
		overflow: hidden;
		width: 750rpx;
		min-height: 100vh;
		position: relative;
		background-color: #F6F7FB;
		padding-bottom: 200rpx;

		.nav_box {

			background: #fff;

			.nav_info {
				height: 88rpx;
				flex-grow: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 27rpx;
				font-size: 30rpx;
				.back_icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 32rpx;
					height: 32rpx;

					.iconfont {
						font-size: 26rpx;
					}
				}

				.sys_title {
					color: #383838;
					text-align: center;
				}
			}

		}

		.input-box {
			width: 700rpx;
			border-radius: 20rpx;
			background: white;
			margin: 20rpx auto;
			overflow: hidden;
			padding: 0 30rpx;
			line-height: 100rpx;
			color: #3D3D3D;
			font-size: 28rpx;

			.li {
				font-size: 30rpx;
				border-bottom: solid 1rpx #F3F4F8;
				color: #333;
				.name {
					width: 25%;
					display: inline-block;
					vertical-align: top;
				}

				.value {
					width: 75%;
					display: inline-block;
					vertical-align: top;
					position: relative;

					image {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						right: 20rpx;
						top: 35rpx;
					}

					input {
						height: 100rpx;
					}
				}
			}

			.list {
				font-size: 28rpx;

				.img_box {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					overflow: hidden;
					line-height: 0;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

			}
		}

		.btn-d {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: white;
			padding: 30rpx;
			font-size: 32rpx;
			color: white;
			text-align: center;
			line-height: 90rpx;
			padding-bottom: 50rpx;

			.btn {
				border-radius: 100rpx;
				background: var(--view-theme);
			}
		}
	}
</style>